<template>
    <div style="background: red;">
        <el-menu
         default-active="2"
         class="el-menu-vertical-demo"
        >
        <el-sub-menu :index="(index+1).toString()" v-for="(item, index) in navlist" :key="index">
            <template #title>
                <el-icon v-if="index==0"><Open /></el-icon>
                <el-icon v-else-if="index==1"><NoSmoking /></el-icon>
                <el-icon v-else><StarFilled /></el-icon>
                <span>{{ item.category }}</span>
            </template>
            <el-menu-item :index="((index+1) + '-' + (i + 1)).toString()" v-for="(item, i) in item.list" :key="i">
                <a href="#" @click.prevent="clickHandle(item.cid)">{{ item.name }}</a>
            </el-menu-item>
        </el-sub-menu>
        
      </el-menu>
    </div>
</template>

<script>
import { Open } from '@element-plus/icons-vue/dist';
import { NoSmoking } from '@element-plus/icons-vue/dist';
import { StarFilled } from '@element-plus/icons-vue/dist';
import axios from 'axios';

export default {
    data() {
        return {
            navlist:[]
        }
    },
    mounted() {
        axios.get('navlist.json')
        .then(res => {
            this.navlist = res.data.navlist
            // console.log(res)
        })
    },
    components:{
        Open,
        NoSmoking,
        StarFilled
    },
    methods: {
        clickHandle(cid) {
            this.$emit('handle',cid)
        }
    }
}
</script>

<style>
:root{
    --el-menu-text-color: #f56c6c !important;
    --el-menu-border-color: #f56c6c !important;
}
</style>
